<!doctype html>
<html>
  <head>
    <title>Click Checkboxes Task</title>
    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" href="../core/core.css" />
    <link rel="stylesheet" href="../core/jquery-ui/jquery-ui.min.css" />
    <!-- JS -->
    <script src="../core/core.js"></script>
    <script src="../core/d3.v3.min.js"></script>
    <script src="../common/ui_utils.js"></script>
    <script src="../core/jquery-ui/external/jquery/jquery.js"></script>
    <script src="../core/jquery-ui/jquery-ui.min.js"></script>

    <style>
      input {
        width: 20px;
      }
    </style>

    <script>
      var SYNONYMS = [
        ["big", "large", "huge", "enormous", "gigantic"],
        ["small", "tiny", "little", "mini", "petite"],
        ["red", "scarlet", "crimson", "vermillion"],
        ["happy", "cheerful", "joyful", "gleeful", "delighted"],
        ["sad", "unhappy", "sorrowful", "miserable", "tragic"],
        ["angry", "mad", "furious", "irritated"],
        ["evil", "wicked", "immoral", "sinful", "corrupt", "depraved"],
        ["wrong", "incorrect", "mistaken", "erroneous"],
        ["real", "genuine", "actual"],
        ["strange", "odd", "peculiar", "unusual", "weird"],
        ["stop", "cease", "halt", "end", "finish"],
        ["scared", "terrified", "panicked", "fearful", "frightened", "afraid"],
        ["quiet", "calm", "peaceful", "serene", "mild"],
        ["old", "aged", "archaic"],
        ["love", "like", "adore", "favor"],
        ["kill", "murder", "assassinate"],
        ["keep", "retain", "preserve", "sustain", "maintain"],
        ["hide", "conceal", "camouflage"],
        ["hate", "despise", "loathe", "detest", "dislike"],
        ["funny", "humorous", "amusing", "comical", "laughable"],
        ["fat", "fleshy", "plump", "chubby"],
        ["stupid", "dumb", "dull", "unwise"],
        ["delicious", "savory", "delectable", "appetizing"],
        ["cut", "slice", "carve", "chop"],
        ["brave", "courageous", "fearless"],
        ["begin", "start", "initiate", "launch"],
        ["answer", "reply", "response"],
        ["television", "televisions", "TV", "TVs"],
        ["house", "home", "houses", "homes"],
        ["fire", "flame", "fires", "flames"],
        ["pig", "pork", "swine", "pig"],
        ["rabbit", "rabbits", "bunny", "bunnies"],
        ["car", "cars", "automobile", "automobiles", "vehicle", "vehicles"],
        ["water"],
      ];

      var createCheckboxes = function (div) {
        var checkboxData = { toclick: {}, clickNames: [] };

        checkboxData.elems = core.randi(2, 7);
        var wordList = SYNONYMS.slice();
        core.shuffle(wordList);
        checkboxData.numToClick = core.randi(1, 6);
        checkboxData.elems = core.randi(Math.max(3, checkboxData.numToClick + 1), 7);
        checkboxData.names = [];
        for (var i = 0; i < checkboxData.elems; i++) {
          var chname = core.sample(wordList[i]);
          var label = div.append("label");
          label
            .append("input")
            .attr("type", "checkbox")
            .attr("id", "ch" + i);
          label[0][0].innerHTML += core.sample(wordList[i]);
          div.append("br");
          checkboxData.names.push([i, chname]);
        }
        core.shuffle(checkboxData.names);
        for (var j = 0; j < checkboxData.elems; j++) {
          if (j < checkboxData.numToClick) {
            checkboxData.toclick[checkboxData.names[j][0]] = true;
            checkboxData.clickNames.push(checkboxData.names[j][1]);
          } else {
            checkboxData.toclick[checkboxData.names[j][0]] = false;
          }
        }

        return checkboxData;
      };

      var genProblem = function () {
        var div = d3.select("#boxes");
        div.html("");

        var checkboxData = createCheckboxes(div);

        var qstr = checkboxData.clickNames.join(", ");
        if (qstr.length === 0) {
          qstr = "nothing";
        }
        d3.select("#query").html("Select words similar to " + qstr + " and click Submit.");

        d3.select("#subbtn").on("click", function () {
          var r = 0;
          for (var i = 0; i < checkboxData.elems; i++) {
            var is_checked = d3.select("#ch" + i)[0][0].checked;
            r += is_checked === checkboxData.toclick[i] ? 1.0 : -1.0;
          }
          core.endEpisode(r == checkboxData.elems ? 1.0 : -1.0, true);
        });
      };

      window.onload = function () {
        core.startEpisode();
      };
    </script>
  </head>
  <body>
    <div id="wrap">
      <div id="query"></div>
      <div id="area">
        <div id="boxes"></div>
        <br />
        <button id="subbtn" class="secondary-action">Submit</button>
      </div>
    </div>
  </body>
</html>
